<template>
  <div class="topic">
    <div class="center">
      <ul class="top" v-if="$store.state.attention.filter(item=>item.user==this.user).length>0">
        <h2>我关注的话题</h2>
        <li v-for="(item, key) in $store.state.attention.filter(item=>item.user==this.user)" :key="key">
          <div class="left">
            <img :src="item.topic.icon" alt="" />
          </div>
          <div class="right">
            <h4>{{ item.topic.title }}</h4>
            <h5>
              <span>{{ item.topic.follower_count }} 关注</span>
              <span>{{ item.topic.attender_count }} 沸点</span>
            </h5>
            <span
              style="color:#59d02c;font-size:14px"
              @click="addattention(key, item.topic_id)"
              >已关注</span
            >
          </div>
        </li>
      </ul>
      <ul class="bom">
        <h2>全部话题</h2>
        <li v-for="(item, key) in $store.state.topicData" :key="key">
          <div class="left">
            <img :src="item.topic.icon" alt="" />
          </div>
          <div class="right">
            <h4>{{ item.topic.title }}</h4>
            <h5>
              <span>{{ item.topic.follower_count }} 关注</span>
              <span>{{ item.topic.attender_count }} 沸点</span>
            </h5>
            <span
              style="color:#59d02c;font-size:14px"
              @click="addattention(key, item.topic_id)"
              >{{
                $store.state.attention.find(ite=>ite.user==user&&ite.topic_id==item.topic_id)?'已关注':'+ 关注'
              }}</span
            >
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: localStorage.getItem("isLogin"),
    };
  },
  created() {
    this.$store.dispatch("getTopic");
    this.$store.dispatch("getAttention");
    
  },
  methods: {
    //点击关注
    addattention(key, id) {
      if(!this.user){
        this.$store.commit('IsShowTrue')
        return 
      }
      this.$store.dispatch("addAttention", { user: this.user, key, id });
    },
  },
  
};
</script>

<style scoped lang="scss">
.topic {
  width: 100%;
  height: 1000px;
  background: #fff;
  .center {
    width: 960px;
    height: auto;
    margin: 0 auto;
    padding: 0 35px;
    overflow: hidden;
    ul {
      width: 100%;
      overflow: hidden;
      h2 {
        padding: 45px 0;
        font-size: 20px;
        font-weight: bold;
        color: #000;
      }
      li {
        width: 260px;
        float: left;
        height: 120px;
        .left {
          width: 72px;
          height: 72px;
          float: left;
          margin-right: 15px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .right {
          width: 140px;
          padding-top: 3px;
          height: auto;
          float: left;
          h4 {
            font-size: 14px;
            color: #000;
            font-weight: bold;
            margin-bottom: 10px;
          }
          h5 {
            margin-bottom: 10px;
          }
          span {
            padding-right: 10px;
            color: #919fad;
          }
        }
      }
    }
  }
}
</style>
